<div>
	<juci-config-lines>
		<juci-config-line title="{{'MAC Filtering'|translate}}">
			<switch ng-model="interface.macfilter.value" class="green"></switch>
		</juci-config-line>
	</juci-config-lines>
	<div ng-show="interface.macfilter.value">
		<!--<div class="alert alert-danger">
			<div ng-message="pattern" translate><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>You must enter a valid MAC address!</div>
		</div>-->
		<juci-config-lines>
			<juci-config-line title="{{'Access for listed devices'|translate}}">
				<div class="btn-group">
					<button ng-repeat="mode in [[1,'allow'], [2, 'deny']]" class="btn btn-default" ng-model="interface.macmode.value" btn-radio="mode[0]">{{ 'interface.macmode.'+mode[1] | translate}}</button>
				</div>
			</juci-config-line>
			<juci-config-line title="{{'Currently added devices'|translate}}">
				<div class="row" ng-repeat="mac in maclist track by $index">
					<div class="col-md-5 form-group">
						<label class="visible-xs visible-sm" translate>Hostname</label>
						<input type="text" class="form-control" ng-model="mac.hostname" ng-blur="rebuildMacList()"/>
					</div>
					<div class="col-md-5 form-group">
						<label class="visible-xs visible-sm" translate>MAC</label>
						<input type="text" class="form-control" ng-model="mac.macaddr" ng-blur="rebuildMacList()" placeholder="xx:xx:xx:xx:xx:xx" /><!-- ng-pattern="/^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/"-->
					</div>
					<div class="col-md-2">
						<button class="btn btn-default pull-right" ng-click="onDeleteHost(mac)"><i class="fa fa-trash-o"></i></button>
						<br style="clear: both;"/>
					</div>
					<div class="col-xs-12"><hr/></div>
				</div>
				<div class="row">
					<div class="col-md-4 col-md-offset-8">
						<button class="btn btn-default pull-right" ng-click="onAddNewClient()"><i class="fa fa-plus"></i></button>
					</div>
				</div>
			</juci-config-line>
			<juci-config-line title="{{'Add currently connected hosts to the list'|translate}}">
				<button class="btn btn-default pull-right" ng-click="onAddClients()"><i class="fa fa-plus"></i></button>
			</juci-config-line>
		</juci-config-lines>
	</div>
	<modal title="{{'Add clients to MAC filtering list'|translate}}" ng-show="showModal" on-accept="onAcceptModal()" on-dismiss="onDismissModal()" dismiss-label="{{'Cancel'|translate}}" accept-label="{{'Save'|translate}}">
		<div class="row" ng-repeat="cl in client_list track by $index">
			<div class="col-xs-6">
				<div class="checkbox checkbox-small checkbox-info">
					<input type="checkbox" ng-model="cl.checked"/>
					<label><strong>{{cl.client.hostname}}</strong></label>
				</div>
			</div>
			<div class="col-xs-6" style="margin-top: 5px;">
				<label>{{cl.client.macaddr}}</label>
			</div>
		</div>
	</modal>
</div>

